<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view>
		<view style="height:130rpx"></view> 
		<view class="bg-white ml-16 mr-16 rounded-26" style="min-height: 122rpx;">
			<view class="topSty flex-start flex">
				<image :src="getImageUrl(orderInfo.avatar)" mode="aspectFill" class="w-55 h-55 ml-10"></image>
				<flag class="w-30 h-20 mr-4" :country="orderInfo.country" />
				<span class="text-010 fz28 font-bold ml-12" style="max-width: 550rpx;">{{ orderInfo.r_name }}</span>
				<!-- <span class=" text-010 fz28 font-bold ml-12">希尔盖</span> -->
				<image src="../../../../static/vipLogoIcon.png" mode="" class="w-110 h-30 ml-12"></image>
			</view>
			<p class=" text-010 fz28 font-bold pt-36 ml-18">{{$t('处理结果')}}</p>
			<view class="contentSty mt-24">
				<p class="pl-24 pt-20">{{ orderInfo.feedback }}</p>
			</view>
			<view class="">
				<view class="between ml-18 mr-20 mt-34">
					<p class="fz24 text-888">{{ $t('退还比例') }}</p>
					<p class="fz24 text-010">{{ orderInfo.compensation }}%</p>
				</view>
				<view class="between mt-30 ml-20 mr-18 pb-34">
					<p class="fz24 text-888">{{$t('服务种类')}}</p>
					<p class="fz24 text-010">{{ orderInfo.service }}</p>
				</view>
			</view>
		</view>
		<view class="bg-white ml-16 mr-16 rounded-26 mt-16 pb-35" style="margin-bottom: 100rpx;">
			<p class=" text-010 fz28 font-bold pt-36 ml-18">{{$t('订单内容')}}</p>
			<view class="contentSty mt-24">
				<p class="pl-24 pt-20">{{ orderInfo.r_content }}</p>
			</view> 
			<p class=" text-010 fz28 font-bold mt-44 ml-18">{{$t('订单金额')}}</p>
			<view class="inputSty mt-24">
				<p class="pl-24 pt-20">{{ orderInfo.amount }}</p>
			</view>
			<p class=" text-010 fz28 font-bold pt-36 ml-18">{{$t('售后原因')}}</p>
			<view class="contentSty mt-24">
				<p class="pl-24 pt-20">{{ orderInfo.repair }}</p>
			</view> 
			<p class=" text-010 fz28 font-bold mt-44 ml-18">{{$t('赔付比例')}}</p>
			<view class="inputSty mt-24">
				<p class="pl-24 pt-20">{{ orderInfo.compensation }}%</p>
			</view>
			<p class=" text-010 fz28 font-bold mt-44 ml-18">{{$t('上传图片')}}</p>
			<view class="mt-24">
				<image v-for="(item,index) in orderInfo.img.split(',')"  :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150 rounded-16 ml-18"></image>
			</view>
			<p v-if="orderInfo.video" class=" text-010 fz28 font-bold mt-44 ml-18">{{$t('上传视频')}}</p>
			<view v-if="orderInfo.video" class="mt-24">
				<view class="pr video_wrap" v-for="item in orderVideo">
					<video id="myVideo" class="w100p  palyxxx" :src="item" :show-center-play-btn="true"
						object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
						:poster="item">
					</video>
					<!-- <view class="video-wrapxx">
						<image :src="orderInfo.img.split(',')[0]" mode="aspectFit"></image>
					</view> -->
					<cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(item)">
						<view class="icon_wrap">
							<u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
						</view>
					</cover-view>
				</view>
				<!-- <image v-for="(item,index) in orderInfo.video.split(',')"  :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150 rounded-16 ml-18"></image> -->
			</view>
		</view>
		<view class="between h-100 bg-white ml-16 mr-16 mt-16 rounded-26">
			<p class="fz28 text-010 font-bold ml-18">{{$t('服务种类')}}</p>
			<p class="fz28 text-888 font-bold mr-18">{{ orderInfo.service }}</p>
		</view>
		
		<view class="footer_btn4">
			<u-button class="btn_blue" @click="callPhone">
				{{ $t('打电话') }}
				<image
					src="/static/translatexx.png"
					class="translatexxxxxx"
					mode="widthFix"
				/>
			</u-button>
			<u-button class="btn_green" @click="inlineCall">
				{{ $t('发消息') }}
			</u-button>
		</view>
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
			<view class="wrapper-video">
				<video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
					play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
				</video>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Title from '../components/title.vue'
	import { getInfo, request_minute, chechkIm } from '@/api/basic.js'
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('售后详情'),
				isShow: true,
				playVideo: '',
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				orderInfo: {},
				orderVideo: [],
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				this.getInfo(options.orderNo)
			}
			this.jjVideoCtx = uni.createVideoContext('jjVideo');
			this.videos = uni.createVideoContext('myVideo');
		  },
		
		methods: {
			inlineCall(info) {
				// this.isMessageGo({
				// 	action: 'initiateChat',
				// 	data: this.orderInfo.r_user_id
				// })

				if(uni.getStorageSync("user_id") == this.orderInfo.r_user_id) {
					uni.showToast({
						title: this.$t('不能和自己聊天'),
						icon: "none",
					});
				} else {
					this.isMessageGo({
						action: 'initiateChat',
						data:this.orderInfo.r_user_id
					})
					return;
					chechkIm({
						send_uid: uni.getStorageSync("user_id"),
						receive_uid:this.orderInfo.r_user_id,
					}).then(res => {
						if (res.data.code == 1) {
							this.isMessageGo({
								action: 'initiateChat',
								data:this.orderInfo.r_user_id
							})
						} else {
							if (res.data.data.send_user == false) {
								uni.$u.toast(this.$t('积分不足，请充值积分'))
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/vip/scorePoint',
									})
								}, 500)
							} else {
								uni.$u.toast(this.$t('对方积分不足'))
							}
						}
					})
				}
			},
			callPhone() {
				console.log('999999', uni.getStorageSync("user_id"), this.orderInfo)
				if(uni.getStorageSync("user_id") == this.orderInfo.r_user_id) {
					uni.showToast({
						title: this.$t('不能给自己打电话'),
						icon: "none",
					});
				} else {
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: this.orderInfo.r_user_id,
					}).then(res => {
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: this.orderInfo.r_user_id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
					})
				}
			},
			getInfo(on) {
				getInfo({on: on , user_id: uni.getStorageSync("user_id"), type: 2}).then(res => {
					if(res.data.code == 200) {
						this.orderInfo = res.data.data.data || {}
						if(this.orderInfo.video) {
							this.orderVideo.push(this.IMAGE_URL + this.orderInfo.video)
						}
						console.log('this.orderInfo999', this.orderInfo)
					} else {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
					}
				})
			},
			// 播放头部视频
			playsHeader(video) {
				// 判断安卓
				const systemInfo = uni.getSystemInfoSync();
				// 判断是否为 Android 系统
				if (systemInfo.platform === 'android') {
					this.playVideo = video;
					this.$refs.popupVideo.open()
					return;
				}
				this.videos.requestFullScreen();
				this.$nextTick(() => {
					this.videos.play();
				})
			},
			// 视频中间播放按钮
			plays(video) {
				// 判断安卓
				const systemInfo = uni.getSystemInfoSync();
				// 判断是否为 Android 系统
				if (systemInfo.platform === 'android') {
					this.playVideo = video;
					this.$refs.popupVideo.open()
					return;
				}
				this.$nextTick(() => {
					this.jjVideoCtx.requestFullScreen();
				})
			},
		}
	}
</script>


<style lang="scss">
	// @import "./shopDetail.scss";
	@import '@/assets/appScss.scss';
	page {
			background: #F6F7FB;
		}
		.topSty {
			// background: linear-gradient(113.85deg, #EEF6FF -2.69%, rgba(255, 255, 255, 0) 47.5%);
			height: 110rpx;
			// width: 100%;
			margin-left: 10rpx;
			// border-radius: 26rpx;
			border-bottom: 1rpx solid #F0F0F0;
		}
		.contentSty {
			min-height: 200rpx;
			background-color: #F7F7F7;
			margin-left: 18rpx;
			margin-right: 18rpx;
			border-radius: 18rpx;
		}
		.inputSty {
			height: 80rpx;
			background-color: #F7F7F7;
			margin-left: 18rpx;
			margin-right: 18rpx;
			border-radius: 18rpx;
		}
		.empty {
			width: 100%;
			height: 300rpx;
		}
		.footer_btn4{
			position: fixed;
			left:0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			padding:30rpx 24rpx 60rpx;
			/deep/ .u-btn {
				padding: 0 !important;
			}
			/deep/ uni-button {
				padding: 0 !important;
				margin: 0 !important;
			}
			/deep/ .u-hairline-border[data-v-3bf2dba7]:after {
				border: none !important;
			}
			.btn_blue{
				width: 49%;
				height: 94rpx;
				flex-shrink: 0;
				border-radius: 18rpx 0 0 18rpx;
				// border: 2rpx solid rgba(3, 189, 130, 0.10);
				background-color: #278AFF;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
				text-align: center;
				line-height: 94rpx;
				padding: 0;
			}
			.btn_green{
				width: 49%;
				height: 94rpx;
				flex-shrink: 0;
				border-radius: 0 18rpx 18rpx 0;
				// border: 2rpx solid rgba(3, 189, 130, 0.10);
				background-color: #03C24F;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
				text-align: center;
				line-height: 94rpx;
				padding: 0;
			}
		}
</style>
